<template>
  <div>
    <!-- 新增设备 -->
    <el-dialog
      class="dialog"
      title="新增设备"
      :visible="dialogStatus"
      width="45%"
      @close="closeDialog"
      @open="openDialog"
    >
      <el-card class="top">
        <el-row type="flex">
          <el-col>销售量:<span>{{ total }}个</span></el-col>
          <el-col>销售额:<span>{{ amount }}万元</span></el-col>
          <el-col>补货数量:<span>{{ supplyNumber }}次</span></el-col>
          <el-col>维修次数:<span>{{ repairNumber }}次</span></el-col>
        </el-row>
      </el-card>
      <p>商品销售(月)</p>
      <el-row type="offset">
        <!-- type="offset"自动换到下一行 -->
        <el-col v-for="(item,index) in skuCollectList" :key="index" :span="6">
          <el-row type="flex" class="box">
            <el-col :span="14"> <div class="box1">{{ item.skuName }}</div></el-col>
            <el-col :span="10"><div>{{ item.count }}</div></el-col>
          </el-row>
        </el-col>
        <el-col v-if="skuCollectList.length===0">当前设备为销售商品</el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { orderCount, orderAmount, supplyCount, repairCount, skuCollect } from '@/api/vm'
export default {
  props: {
    dialogStatus: {
      type: Boolean,
      default: false
    },
    statusObj: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      orderCount: {
        start: '',
        end: '',
        innerCode: ''
      },
      supplyCoun: {
        start: '',
        end: '',
        innerCode: ''
      },
      total: '',
      amount: '',
      supplyNumber: '',
      repairNumber: '',
      skuCollectList: []
    }
  },
  methods: {
    // 1.表单关闭
    closeDialog() {
      this.$emit('closeStatus')
    },
    // 1.2表单打开
    async openDialog() {
      this.orderCount.innerCode = this.statusObj.innerCode
      this.orderCount.end = `${this.getDateEnd()} 23:59:59`
      this.orderCount.start = `${this.getDateStart()} 00:00:00`
      const { data } = await orderCount(this.orderCount)
      this.total = data
      const { data: amount } = await orderAmount(this.orderCount)
      this.amount = (amount / 1000000).toFixed(2)
      this.supplyCoun.end = this.getDateEnd()
      this.supplyCoun.start = this.getDateStart()
      this.supplyCoun.innerCode = this.statusObj.innerCode
      const { data: supplycount } = await supplyCount(this.supplyCoun)
      this.supplyNumber = supplycount
      const { data: repairNumber } = await repairCount(this.supplyCoun)
      this.repairNumber = repairNumber
      const { data: collect } = await skuCollect(this.supplyCoun)
      this.skuCollectList = collect
    },
    // 3. 获取当前时间--结束
    getDateEnd() {
      const date = new Date()
      const year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      month = month < 10 ? '0' + month : month // 月小于10，加0
      day = day < 10 ? '0' + day : day // day小于10，加0
      return `${year}-${month}-${day}`
    },
    // 3.1 获取当前时间--开始
    getDateStart() {
      const date = new Date()
      const year = date.getFullYear()
      let month = date.getMonth() + 1
      //   let day = date.getDate()
      month = month < 10 ? '0' + month : month // 月小于10，加0
      //   day = day < 10 ? '0' + day : day // day小于10，加0
      return `${year}-${month}-01`
    }
  }
}
</script>

<style lang="scss">
.top {
  background: rgba(227, 233, 245, 0.39);
  span {
    color: #5f84ff;
  }
}
.box1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.box {
  padding: 0 10px;
  line-height: 40px;
  border-right: 1px solid #d8dde3;
  border-bottom: 1px solid #d8dde3;
}
</style>
